<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>phone editor</title>
    
    <link rel="stylesheet" type="text/css" href="./js/lib/mobileSelect/css/mobileSelect.css">
    <link rel="stylesheet" type="text/css" href="./js/lib/Spectrum/spectrum.css">
    <link rel="stylesheet" type="text/css" href="./js/filter/ue.grid-filter.css">
    <link rel="stylesheet" type="text/css" href="./js/grid/ue.grid.css">
    <link rel="stylesheet" type="text/css" href="./js/form/ue.form.css">
    <link rel="stylesheet" type="text/css" href="./css/fonticon/iconfont.css">
    <link rel="stylesheet" href="./css/UEditor_phone.css">
    <link rel="stylesheet" href="./css/editor-phone.css">
</head>

<body>
    <div class="maintop">
    	<div class="pageSlider"><span class="iconfont icon-other"></span></div>
    	<div class="ctrlContainer">
    		
	        <ul class="ctrlList">
	            <li class="ctrlItem " data-type="TEXT">
	                <span class="iconfont icon-text"></span>
	                <label for="">label</label>
	            </li>
	            <li class="panel imgPanel" data-type="IMG">
	                <span class=" iconfont icon-pic"></span>
	                <label for="">image</label>
	            </li>

	            <li class="ctrlItem" data-type="BOX">
	                <span class=" iconfont icon-dynamic"></span>
	                <label for="">BOX</label>
	            </li>
	           <li class="panel formPanel">
	                <span class="iconfont icon-activity"></span>
	                <label for="">form</label>
	                <div class="ctrlNavChild nav-formList">
	                	<div class="crate crateTop">
	                		<div class="crate crateTop"></div>
	                	</div>
	                	<ul>
	                		<li>input</li>
	                		<li>button</li>
	                		<li>select</li>
	                		<li>checkbox</li>
	                		<li>radio</li>
	                		<li>upload</li>
	                	</ul>
	                </div>
	            </li>
	            <li class="panel tablePanel">
	                <span class="iconfont icon-createtask"></span>
	                <label for="">table</label>
	            </li>
	           
	            <li class="panel componentPanel">
	                <span class="iconfont icon-workbench"></span>
	                <label for="">component</label>
	                <div class="ctrlNavChild nav-comonent">
	               		<div class="crate crateTop"><div class="crate crateTop"></div></div>
	                	<ul>
	                		<li class="nav-dataList">
	                			数据列表
	                		</li>
	                		<li>轮播</li>
	                	</ul>
	                </div>
	            </li>

	           <li class="panel UEBOXPanel" style="display: none">
	                <span class="iconfont icon-wodedingdan"></span>
	                <label for="">UEBOX</label>
	                <div class="ctrlNavChild">
	                	<div class="crate crateTop"><div class="crate crateTop"></div></div>
	                	<ul>
	                		
	                	</ul>	
	                </div>
	                
	            </li>
	        </ul>
    	</div>
    </div>
    <div class="main">
        <div class="left"></div>
        <div class="center">
            <div class="phoneOuter">
                <div class="phoneTop">
                    <div class="top_"></div>
                    <div class="title"></div>
                </div>
                <div class="phoneMain">
                    <div id="canvas">
                        <canvas id="xbyl-grid" width="400" height="570"></canvas>
                    </div>
                    <div class="page" ctrl-type="PAGE">
                    	<div class="xbyl-page-top page-struckItem "></div>
                    	<div class="xbyl-split xbyl-split-top"></div>
						<div class="xbyl-page-content page-struckItem ">
							
						</div>
						<div class="xbyl-split xbyl-split-bottom"></div>
						<div class="xbyl-page-bottom page-struckItem "></div>
                    </div>
                </div>
                <div class="phoneBottom">
                </div>
                <div class="tool">
                	<div class="toolItem  iconfont icon-chexiao">
                		
                		<div class="xbyl-tips">
                			<span class="crate crateLeft"></span>撤销
                		</div>
                	</div>
                    <div class="toolItem xbyl-grid-switch iconfont icon-chexiao1">
                    	<div class="xbyl-tips">
                			<span class="crate crateLeft"></span>恢复
                		</div>
                    </div>
                   
                    <div class="toolItem xbyl-page-set iconfont icon-yemian">
                    	<div class="xbyl-tips">
                			<span class="crate crateLeft"></span>页面设置
                		</div>
                    </div>
                    <div class="toolItem xbyl iconfont icon-yinle3">
                    	<div class="xbyl-tips">
                			<span class="crate crateLeft"></span>音乐
                		</div>
                    </div>
                    <div class="toolItem xbyl iconfont icon-playon" id="preview">
                    	<div class="xbyl-tips">
                			<span class="crate crateLeft"></span>预览
                		</div>
                    </div>
                   
                   
                    <div class="toolItem  xbyl-grid-switch  iconfont icon-iconfontmofangdaohang">
                    	<div class="xbyl-tips">
                			<span class="crate crateLeft"></span>网格设置
                		</div>
                    </div>
                    <div class="toolItem xbyl iconfont icon-houtai-changfangxing">
                    	<div class="xbyl-tips">
                			<span class="crate crateLeft"></span>手机边框
                		</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="right"></div>
        <div class="setComponent" id="attrs">
            <div class="componentTop">
                <span class="title">组件设置</span>
                <span class="close">X</span>
            </div>
            <div class="componentNav">
                <ul>
                    <li class="active" for=".style">样式</li>
                    <li for=".donghua">动画</li>
                    <li for=".cufa">触发</li>
                    <li for=".duoxuan">多选操作</li>
                </ul>
            </div>
            <div class="componeMain">
                <div class="style styleContent mainbox"></div>
                <div class="donghua mainbox hideMainBox"></div>
                <div class="cufa mainbox hideMainBox">
                	<div class="addcufa">
                		<span>添加触发</span>
                	</div>
                	<div class="cufaCondition">
                		<div class="chooseConditon">选择择触发条件</div>
                		<ul class="eventBox">
                			<li class="" for=".ClickBox">单击</li>
                			<li class=""  for=".DblClickBox">双击</li>
                			<li class=""  for=".YaoBox" >摇一摇</li>
                			
                		</ul>
                	</div>
                	<div class="action">
	                	<div class="actionBox">
	                		<span class="">选择操作:</span>
	                		<select class="actionList"></select>
	                	</div>
	                	<div class="itemBoxContent ClickBox">


	                	</div>
	                	<div class="itemBoxContent DblClickBox"></div>
	                	<div class="itemBoxContent YaoBox"></div>
                	</div>
                </div>
                <div class="duoxuan mainbox hideMainBox">
                	<ul>
                		<li class="align leftalign">左对齐</li>
                		<li class="align rightalign">右对齐</li>
                		<li class="align topalign">上对齐</li>
                		<li class="align bottomalign">下对齐</li>
                		<li class="align centeralign">居中对齐</li>
                		<li class="align equalswidth">等宽</li>
                		<li class="align equalsheight">等高</li>
                	</ul>
                </div>
            </div>
            <div class="componentBottom">
                <input type="button" class="sure" name="" value="确定">
                <input type="button" class="clear" name="" value="清除">
            </div>
        </div>
        <div class="choose">
            <div class="chooseTop">
                <span class="title">选择触发哪些元素</span>
            </div>
            <div class="chooseMain"></div>
            <div class="chooseBottom"></div>
        </div>
    </div>
    <div class="mainbottom"></div>
    <div class="xbyl-panel panelBox">
        <div class="formBox">
            <ul class="formList"></ul>
        </div>
    </div>
    <div class="xbyl-panel pagePanelBox">
			<div class="panelTop">
				<label class="panelTitle">选择页面内容</label>
				<label class="panelClose">X</label>
			</div>
			<div class="panelMain">
				<div class="mainItem panelNav">
					<ul class="panelNavList">
						<li class="panelNavActive" for=".fieldContainer">All Table</li>
						<li for=".ueboxContainer">All UEBOX</li>
					</ul>
				</div>
				<div class="mainItem panelContext">
					<div class="contextItem fieldContainer">
						<div class="checkAll"><label class="checkText"><input type="checkBox"><span>全选</span></label></div>
						<ul class="xbyl-fieldList">
							
						</ul>
						<div class="panelScroll">
							<div class="scrollSilder"></div>
						</div>
					</div>
					<div class="contextItem ueboxContainer">
						<div class="checkAll"><input type="checkBox"><label class="checkText">全选</label></div>
						<ul class="ueboxList">
							
						</ul>
						<div class="panelScroll">
							<div class="scrollSilder"></div>
						</div>
					</div>
				</div>
			</div>

			<div class="panelBottom">
				<div class="fielUpload">
					<div class="fielUploadAction iconfont icon-shangchuan"></div>
					<form action="###" enctype="multipart/form-data">
						<input type="file" name="file"> 
					</form>
				</div>
				<div class="optertion">
					<input type="button" name="" class="panelCancel" value="cancel">
					<input type="button" name="" class ="panelSure" value="sure">
				</div>
			</div>
	</div>
	<div class="xbyl-RightMenuBox">
		<ul class="rightMenu">
			<li id="delete">删除</li>
			<li></li>
		</ul>
	</div>
	<iframe src="" id="previewBox" class="xbyl-panel"></iframe>
	<div class="xbyl-mask">
		<div style="margin-top: 60px; text-align: right; padding-right: 40px; color: #FFFFFF; font-size: 30px;cursor: pointer;">X</div>
	 </div>
</body>

<script type="text/javascript" src="./js/lib/require.js"  data-main="js/main"></script>
<script type="text/javascript" src="./js/lib/mobileSelect/js/mobileSelect.js"></script>
<script type="text/javascript">
     var timetamp = new Date().getTime();
        require.config({
            paths : {
                "common"          : "common.js?"+timetamp,
                "jquery"          : "jquery-2.2.0.js?"+timetamp,
                "jqueryUI"        : "jquery-1.11.4.ui.js?"+timetamp,
                "Spectrum"        : "lib/Spectrum/spectrum.js?"+timetamp,
                "UELIST"          : "lib/UELIST.js?"+timetamp,
                "UESlider"        : "lib/UESlider.js?"+timetamp,
                "ue.plugins"      : "ue.plugins-3.0.1.js?"+timetamp,
                "newEditor"       : "newEditor.js?"+timetamp,
                "editor-phone"    : "editor-phone.js?"+timetamp
                
            },
                
            shim : {
               
               'jquery' : {
                    exports : '$'
               },

               'ue.plugins' : {
                    deps : ["jquery"]
               }

            }

        });
</script>
</html>